<template>
	<div class="max">
		<my-header :backBtn="true">
			<div slot="title">通知公告</div>
			<div slot="right" @click="submitFn">
				确定
			</div>
		</my-header>
		<div class="cont-nof tl" v-if="!selectIO">
			<div class="weui-navbar">
				<div class="weui-navbar__item " :class="{'weui-bar__item_on':menu==0}" @click="menu=0">
					文本
				</div>
				<div class="weui-navbar__item" :class="{'weui-bar__item_on':menu==1}" @click="menu=1">
					超链接
				</div>
			</div>
			<div class="flex weui-cells__title select-box">
				接收对象：
				<a class="weui-btn weui-btn_primary my-weui-btn" @click="selectReceiver" v-if="!(selectList.teacher.length+selectList.kinsfolk.length)">{{routeData.text}}</a>
			</div>
			<div class="selectedName" v-if="selectList.teacher.length" @click="selectReceiver">
				<span class="item-name">老师：</span>{{teachersName}}
			</div>
			<div class="selectedName" v-if="selectList.kinsfolk.length" @click="selectReceiver">
				<span class="item-name">家长：</span>{{kinsfolkName}}
			</div>
			<div class="weui-cells__title">标题</div>
			<div class="input-title">
				<input type="text" class="title" placeholder="请输入标题" v-model="atData.title">
			</div>
			<template v-if="menu==0">
				<div class="weui-cells__title">通知内容</div>
				<div class="input-content">
					<contenteditable placeholder="请输入正文" @input="getContent" :styles="{'padding':'0.5rem','height':'100%'}"></contenteditable>
				</div>
			</template>
			<template v-if="menu==1">
				<div class="weui-cells__title">超链接</div>
				<div class="input-url">
					<textarea placeholder="请输入超链接" v-model="atData.link" style="padding: 0.5rem;height: 100%;width: 100%;border: 0;box-sizing: border-box;'"></textarea>
				</div>
			</template>
			<div class="weui-cells__title">过期时间</div>
			<div class="input-title" style="background: #FFFFFF;">
				<input class="weui-input tc" type="date" value="" v-model="atData.expireTime">
			</div>
		</div>
		<div class="cont-nof max opt oh tl" v-else>
			<div class="search-cell flex">
				<div class="search-item">学龄段</div>
				<div class="search-box">
					<select class="search-select" v-model="search.gradeId" @change="fetchClazzList">
						<option v-for="cla in gradeList" :value="cla.id">{{cla.name}}</option>
					</select>
				</div>
			</div>
			<div class="search-cell flex">
				<div class="search-item">班级</div>
				<div class="search-box">
					<select class="search-select" v-model="search.clazzId" @change="selectReceiver">
						<option v-for="cla in classList" :value="cla.id">{{cla.name}}</option>
					</select>
				</div>
			</div>
			<div class="search-cell flex">
				<div class="search-item">姓名</div>
				<div class="search-box">
					<input v-if="loginType==='kindergarten'" class="search-input" type="text" v-model="search.name" @input="selectReceiver"
					 placeholder="请输入教师或家长姓名">
					<input v-else class="search-input" type="text" v-model="search.name" @input="selectReceiver" placeholder="请输入家长姓名">
				</div>
			</div>
			<div class="opt-item tl oh" v-if="loginType==='kindergarten'">
				<div class="item-name fl">
					教师
				</div>
				<div class="item-checkbox fr flex" @click="selectAll('teacher')">
					<span style="margin-right: 4px;">
						全选
					</span>
					<div class="checkbox-tick" :class="{'checked':selectList.teacher.length==list.teacher.length&&list.teacher.length!=0}">
						<i class="weui-icon-checked"></i>
					</div>
				</div>
				<div class="name-list fl flex">
					<div v-for="(item,index) in list.teacher" :key="index" @click="selectItem(item,index,'teacher')" :class="{'check':checkItem(item,'teacher').resp}">
						{{item.name}}
					</div>
				</div>
			</div>
			<div class="opt-item tl oh">
				<div class="item-name fl">
					家长
				</div>
				<div class="item-checkbox fr flex" @click="selectAll('kinsfolk')">
					<span style="margin-right: 4px;">
						全选
					</span>
					<div class="checkbox-tick" :class="{'checked':selectList.kinsfolk.length==list.kinsfolk.length&&list.kinsfolk.length!=0}">
						<i class="weui-icon-checked"></i>
					</div>
				</div>
				<div class="name-list fl flex">
					<div v-for="(item,index) in list.kinsfolk" :key="index" @click="selectItem(item,index,'kinsfolk')" :class="{'check':checkItem(item,'kinsfolk').resp}">
						{{item.name}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import contenteditable from '@/components/contenteditable.vue';

	export default {
		components: {
			contenteditable
		},
		data() {
			let time = this.$getNowDate('date');
			return {
				loginType: this.$Cookies.get("loginType"),
				gradeList: [],
				classList: [],
				menu: 0,
				routeData: {},
				selectIO: false,
				list: {
					teacher: [],
					kinsfolk: []
				},
				selectList: {
					teacher: [],
					kinsfolk: []
				},
				search: {
					name: '',
					gradeId: '',
					clazzId: ''
				},
				atData: {
					title: '',
					content: '',
					link: '',
					expireTime: time,
					kinsfolkIdList: [],
					teacherIdList: [],
				}
			}
		},
		watch: {
			menu(val) {
				if (val == 0) {
					this.atData.link = '';
				} else {
					this.atData.content = '';
				}
			}
		},
		computed: {
			teachersName() {
				let nameArr = this.selectList.teacher.map(o => o.name);
				if (nameArr.length > 4) {
					return nameArr.slice(0, 4).join('、') + ' 等' + nameArr.length + '位老师';
				}
				return nameArr.join('、');
			},
			kinsfolkName() {
				let nameArr = this.selectList.kinsfolk.map(o => o.name);
				if (nameArr.length > 4) {
					return nameArr.slice(0, 4).join('、') + ' 等' + nameArr.length + '位家长';
				}
				return nameArr.join('、');
			}
		},
		methods: {
			searchFn(val) {
				this.searchValue = val;
				this.selectReceiver();
			},
			getContent(value) {
				this.atData.content = value;
			},
			selectAll(type) { //点击全选按钮
				if (this.selectList[type].length === this.list[type].length) this.selectList[type] = []; //取消全选
				else this.selectList[type] = this.list[type].map(o => ({
					...o
				})); //全选
			},
			fetchClazzList() {
				this.$http.getClazzListByGradeId({
					gradeId: this.search.gradeId
				}).then(resp => {
					this.classList = resp.data;
					this.selectReceiver();
				})
			},
			selectItem(item, index, type) { //点击姓名
				let isSelect = this.checkItem(item, type);
				if (isSelect.resp) {
					this.selectList[type].splice(isSelect.index, 1)
				} else {
					this.selectList[type].push(item);
				}
			},
			checkItem(item, type) { //是否勾选
				let idList = this.selectList[type].map(o => o.id);
				let index = idList.indexOf(item.id);
				if (index != -1) return {
					index: index,
					resp: true
				} //存在
				return {
					index: -1,
					resp: false
				}
			},
			toast(text, type) {
				let _this = this;
				this.$toast.show(text, type);
				setTimeout(function() {
					_this.$toast.hide();
				}, 1000)
			},
			submitFn() {
				if (this.selectIO) {
					this.selectIO = false;
				} else {
					this.atData.teacherIdList = this.selectList.teacher.map(o => o.id);
					this.atData.kinsfolkIdList = this.selectList.kinsfolk.map(o => o.id);
					if (!this.atData.title) {
						this.$weui.topTips('标题不能为空');
						return;
					}
					if (this.menu == 0) {
						if (!this.atData.content) {
							this.$weui.topTips('内容不能为空');
							return;
						}
					}
					if (this.menu == 1) {
						if (!this.atData.link) {
							this.$weui.topTips('超链接不能为空');
							return;
						}
					}
					if (!this.atData.teacherIdList.length && !this.atData.kinsfolkIdList.length) {
						this.$weui.topTips('请选择接收对象');
						return;
					}
					//提交数据
					this.$toast.show('发布中', 'loading');
					this.$http.postNotice(this.atData).then(resp => {
						this.$toast.hide();
						this.$weui.toast('发布成功');
						history.back(0);
					})
				}
			},
			selectReceiver() {
				this.selectIO = true;
				this.$http.fetchReceiver(this.search).then(resp => {
					this.list.teacher = resp.data.teacherList;
					this.list.kinsfolk = resp.data.kinsfolkList;
				})
			},
			getGradeList() {
				this.$http.getGradeList().then(resp => {
					this.gradeList = resp.data;
				})
			}
		},
		created() {
			this.routeData = this.$route.query;
			if (!this.routeData.text) {
				this.routeData.text = '请选择接收对象'
			}
			this.getGradeList();
		},
	}
</script>

<style scoped>
	.expires,
	.input-title,
	.input-content,
	.input-url {
		font-size: 1.4rem;
		width: 100%;
		height: 30rem;
		padding: 1.5rem;
		box-sizing: border-box;
		background: none;
	}

	.input-url {
		height: 11rem;
	}

	.expires::before {
		border: none;
	}

	.expires,
	.input-title {
		height: 5rem;
	}

	.input-title .title {
		height: 100%;
		width: calc(100% - 1rem);
		padding: 0.5rem;
		border: none;
		color: #2c3e50;
	}

	.weui-btn.my-weui-btn {
		padding: 0 10px;
		font-size: 1.2rem;
		height: 2.5rem;
		line-height: 2.5rem;
	}

	.opt-item {
		width: calc(100% - 16px);
		margin: 1rem auto 0 auto;
		height: auto;
		padding: 1.5rem 1rem;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.item-name {
		display: inline-block;
		font-size: 1.6rem;
		border-radius: 10px;
		width: 5px;
		white-space: nowrap;
		text-indent: 1.5rem;
		line-height: 1.6rem;
		height: 1.6rem;
		background: #36C12D;
		margin-bottom: 1.5rem;
		margin-right: 6rem;
	}

	.item-checkbox {
		height: 1.6rem;
		text-align: center;
		color: rgba(111, 111, 111, 1);
		font-size: 1.4rem;
	}

	.weui-icon-checked {
		display: inherit;
		font-size: 1.6rem;
	}

	.checkbox-tick .weui-icon-checked:before {
		content: '\EA01';
		color: #C9C9C9;
		display: block;
		margin-left: 0;
		margin-right: 0;
	}

	.checkbox-tick.checked .weui-icon-checked:before {
		content: '\EA06';
		color: #36C12D
	}

	.name-list {
		width: 100%;
		margin: 1rem 0;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.name-list>div {
		padding: 0.5rem 1rem;
		margin-right: 0.5rem;
		margin-bottom: 0.5rem;
		border-radius: 4px;
		border: 1px solid #EEEEEE;
	}

	.name-list>div.check {
		background: #36C12D;
		border: 1px solid #36C12D;
		color: #FFFFFF;
	}

	.selectedName {
		width: calc(100% - 32px);
		padding: 0.5rem 1rem;
		box-sizing: border-box;
		margin: auto;
		background: #FFFFFF;
		color: #2c3e50;
	}

	.weui-cells__title {
		font-size: 1.6rem;
		color: #000000;
	}
</style>
